<template>
    <div>
        <el-drawer
            v-model="visible"
            direction="rtl"
            :before-close="handleCloseDrawer"
            size="50%"
        >
        <template #title>
            <h4>数据</h4>
            </template>
            <template #default>
                <div>
                  <div class="search-content">
                      <el-space wrap>
                          <el-date-picker
                              v-model="searchInfo.dateRange"
                              type="daterange"
                              range-separator="至"
                              start-placeholder="开始日期"
                              end-placeholder="结束日期"
                              value-format="YYYY-MM-DD HH:mm" 
                          />
                          <el-select v-model="searchInfo.sensorData" placeholder="请选择" clearable style="width: 100px;">
                              <el-option
                                  v-for="opt in sensorOptions"
                                  :key="opt.value"
                                  :label="opt.label"
                                  :value="opt.value"
                              />
                          </el-select>
                      </el-space>
                      <el-button type="primary" @click="handleExport">
                          <!-- <el-icon>  <Plus /></el-icon> -->
                          导出
                      </el-button>
                  </div>
                  <lineChart :dateRange="searchInfo.dateRange" :sensorData="searchInfo.sensorData"/>
                </div>
            </template>
            <!-- <template #footer>
            <div style="flex: auto">
                <el-button @click="cancelDrawerClick">取消</el-button>
                <el-button type="primary" @click="confirmDrawerClick">确认</el-button>
            </div>
            </template> -->
        </el-drawer>
    </div>
</template>


<script setup lang="ts">
import { computed, reactive, ref } from 'vue'
import lineChart from './lineChart.vue'
// 接收父组件传入的isShowDrawer属性
const props = defineProps({
  isShowDrawer: {
    type: Boolean,
    default: false
  }
})

// 历史数据 查询条件
const searchInfo = reactive({
  dateRange:[],
  sensorData:'0'
})

const sensorOptions = ref([
    { label: '温度', value: '0' },
    { label: '湿度', value: '1' },
    { label: '风速', value: '2' },
])

// 导出
function handleExport(){}

// 定义更新isShowDrawer的事件
const emit = defineEmits(['update:isShowDrawer'])

// 使用computed实现v-model的双向绑定
const visible = computed({
  get() {
    return props.isShowDrawer
  },
  set(value) {
    // 当抽屉状态改变时，同时更新父组件的isShowDrawer值
    emit('update:isShowDrawer', value)
  }
})

// 抽屉关闭前的钩子 done是钩子关闭前的回调
function handleCloseDrawer(done: () => void) {
  visible.value = false
  done()
}

// 取消按钮点击事件
function cancelDrawerClick() {
  visible.value = false
}

// 确认按钮点击事件
function confirmDrawerClick() {
  visible.value = false
}
</script>

<style lang="scss" scoped>
.search-content{
  display: flex;
  justify-content: space-between;
}
</style>